<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IMoney主页</title>
    <link rel="shortcut icon" href="#" />
    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="stylesheet" type="text/css" href="../css/mainpage.css">
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../js/mainpage.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>


    <style>

    </style>
</head>

<body>
<div id="web">
    <!-- 非可视区域，弹出的表单框 请往下翻阅主界面 -->
    <!-- 表单生成区  -->
    <!--    账本表单操作  更换，增加，修改-->
    <el-dialog title="更换账本" :visible.sync="bookVisible1" width="35%" :before-close="handleClose" top="200px">
        <el-form ref="bookform" :model="bookform" label-width="80px">

            <el-form-item label="类型" prop="price" :rules="[
      { required: true, message: '请选择要切换的账本', trigger: 'blur' },]">
                <el-select v-model="bookform.type" placeholder="请选择账本">
                    <el-option v-for="it in bookUIds" :label="it.bookname"  :value="it.bookname"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="warning" @click="change_book()">确定</el-button>
                <el-button @click="clearbookform">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-dialog title="添加账本" :visible.sync="bookVisible2" width="35%" :before-close="handleClose" top="200px">
        <el-form ref="bookform" :model="bookform" label-width="30px">
            <el-form-item label="" prop="new" :rules="[
      { required: true, message: '请输入新账本名称', trigger: 'blur' },]">

                <el-input  type="text" v-model="bookform.new" maxlength="11" show-word-limit placeholder="输入账本名称,不建议超过十一个字" ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="warning" @click="addnewbook">创建</el-button>
                <el-button @click="clearbookform">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-dialog title="您确定删除当前账本？" :visible.sync="bookVisible3" width="35%" :before-close="handleClose" top="200px">
        <el-form ref="bookform" :model="bookform" label-width="80px">

            <el-form-item>
                <el-button type="warning" @click="del_book">确定</el-button>
                <el-button @click="bookVisible3=false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 支出表单 -->
    <el-dialog title="添加支出记录" :visible.sync="dialogVisible" width="35%" :before-close="handleClose" top="200px">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="消费金额"  prop="price" :rules="[
      { required: true, message: '请输入消费金额', trigger: 'blur' },]">
                <el-input type="text" v-model="form.price" autocomplete="off" oninput="value=value.toString().match(/^\d+(?:\.\d{0,2})?/)"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="type" :rules="[
      { required: true, message: '', trigger: 'blur' },]">
                <el-select v-model="form.type" autocomplete="off" placeholder="请选择支出类型">

                    <el-option v-for="it in list_out" :label="it"  :value="it"> </el-option>

                </el-select>
            </el-form-item>
            <el-form-item label="时间" prop="time" :rules="[
      { required: true, message: '请输入消费时间', trigger: 'blur' },]">
                <el-col :span="11">
                    <el-date-picker  type="date" placeholder="选择日期" v-model="form.time" style="width: 100%;" value-format="yyyy.MM.dd"></el-date-picker>

                </el-col>

            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="form.remark"  maxlength="50" show-word-limit placeholder="您可以选择为您的记录添加至多50字的备注哦！"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit_create">创建</el-button>
                <el-button @click="clearform">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 收入表单对话框 -->

    <el-dialog title="添加收入记录" :visible.sync="dialogVisible2" width="35%" :before-close="handleClose" top="200px">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item prop="price" label="收入金额" :rules="[
      { required: true, message: '请输入收入金额', trigger: 'blur' },]">
                <el-input type="text" v-model="form.price" autocomplete="off" oninput="value=value.toString().match(/^\d+(?:\.\d{0,2})?/)"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="type" :rules="[
      { required: true, message: '', trigger: 'blur' },]">
                <el-select v-model="form.type" placeholder="请选择账单类型">
                    <el-option v-for="it in list_in" :label="it"  :value="it"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="时间" prop="time" :rules="[
      { required: true, message: '请选择时间', trigger: 'blur' },]">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.time" style="width: 100%;" value-format="yyyy.MM.dd"></el-date-picker>
                </el-col>

            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="form.remark"  maxlength="50" show-word-limit placeholder="您可以选择为您的记录添加至多50字的备注哦！"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit_create">创建</el-button>
                <el-button @click="clearform">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>

    <!-- 修改表单对话框 -->

    <el-dialog title="修改记录" :visible.sync="dialogVisible3" width="35%" :before-close="handleClose" top="200px">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="修改金额" prop="price" :rules="[
      { required: true, message: '请输入金额', trigger: 'blur' },]">
                <el-input type="text" v-model="form.price" autocomplete="off" oninput="value=value.toString().match(/^\d+(?:\.\d{0,2})?/)"></el-input>
            </el-form-item>
            <el-form-item label="修改类型" prop="type" :rules="[
      { required: true, message: '', trigger: 'blur' },]">
                <el-select v-model="form.type" placeholder="请选择">
                    <el-option-group
                            v-for="group in list_inout"
                            :key="group.label"
                            :label="group.label">
                        <el-option
                                v-for="item in group.options"
                                :key="item"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-option-group>
                </el-select>

            </el-form-item>
            <el-form-item label="时间" prop="time" :rules="[
      { required: true, message: '请选择时间', trigger: 'blur' },]">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.time" style="width: 100%;" value-format="yyyy.MM.dd"></el-date-picker>
                </el-col>

            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea"  maxlength="50"  show-word-limit v-model="form.remark" placeholder="您可以选择为您的记录添加至多50字的备注哦！"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit_modify()">保存</el-button>
                <el-button @click="concel_modify()">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>



    <!-- 非可视区表单结束 -->


    <!-- 主界面 -->
    <div class="header">
        <div class="menu">
            <ul class="header_left">
                <li id="logo"></li>
                <li>用户邮箱:  </li>
                <li id="useremail"></li>
            </ul>
            <div class="header_right">
                <ul>
                    <li><a href="javascript:;">联系我们</a><span>|</span></li>
                    <li><a href="登录.html">退出登录</a><span></span></li>
                    <!-- <li class="header_right_li"><a href="#">切换账号</a>
        <div>还没有其他账号，请添加！</div>
      </li> -->

                </ul>
            </div>
        </div>
    </div>

    <div id="board">
        <div class='coin'>
            <!--开始 -->
            <div class='front jump'>
                <div class='star'></div>
                <span class='currency'>$</span>
                <div class='shapes'>
                    <div class='shape_l'></div>
                    <div class='shape_r'></div>
                    <span class='top'>عظمى</span>
                    <span class='bottom'>عملة</span>
                </div>
            </div>
            <div class='shadow'></div>
        </div>
        <!--结束 -->
        <h4 class="plogo">Imoney</h4>
        <div id="financialInfo">
            <div id="outlay">本月支出:</div>
            <div id="income">本月收入：</div>
            <div id="budget">剩余预算：</div>
        </div>
        <h4 class="plogo">Imoney</h4>

        <div class='coin'>
            <!--开始 -->
            <div class='front jump'>
                <div class='star'></div>
                <span class='currency'>$</span>
                <div class='shapes'>
                    <div class='shape_l'></div>
                    <div class='shape_r'></div>
                    <span class='top'>عظمى</span>
                    <span class='bottom'>عملة</span>
                </div>
            </div>
            <div class='shadow'></div>
        </div>
        <!--结束 -->
    </div>

    <div id="searchbox">
        <!-- 搜索表格分界线---------------------------------------- -->
        <form>
            <span>账本:</span>
            <!-- <button @click="test">测试</button> -->
            <template>
                <el-select style="width: 100px;" v-model="value_account" placeholder="请选择">
                    <el-option
                            v-for="item in options_account"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
            <span>收入/支出:</span>
            <template>
                <el-select style="width: 100px;" v-model="value_inout" placeholder="请选择">
                    <el-option
                            v-for="item in options_inout"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
            <span>类型:</span>

            <template>
                <el-select style="width: 150px;" v-model="value_type" placeholder="请选择">
                    <el-option
                            v-for="item in options_type"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
            <span>日期: </span>
            <!-- style为我自己加的 可以改日期 -->
            <el-date-picker style="width: 150px;" v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions">
            </el-date-picker>
            <span> - </span>
            <el-date-picker style="width: 150px;" v-model="value2" type="date" placeholder="选择日期" :picker-options="pickerOptions">
            </el-date-picker>
            <span>
                <el-input maxlength="10"  style="width: 208px;margin-left: 15px;" v-model="input"  placeholder="请输入关键字"></el-input>
<!--                oninput="value=value.replace(/[^\d.]/g,'')"-->
                </span>
            <el-button style="background-color: rgb(255, 195, 0);margin-left: 2px;" @click="test" type="warning" icon="el-icon-search">搜索</el-button>
        </form>
        <!-- 搜索表格分界线---------------------------------------- -->

    </div>



    <div id="mainpart">
        <!-- 导航栏+表格 -->
        <nav id="shell">
            <p id="currentBook"> 当前账本: <span >{{book_now_name}}</span> <p>
            <ul class="buttons">
                <li class="li">
                    记账
                    <ul>
                        <li @click="dialogVisible_earn">收入</li>
                        <li @click="dialogVisible_pay">支出</li>
                    </ul>
                </li>

                <li class="li">
                    账本
                    <ul>
                        <li @click="bookVisible_change">切换账本</li>
                        <li @click="bookVisible_add">添加账本</li>
                        <li @click="bookVisible_del">删除帐本</li>
                    </ul>
                </li>

                <li class="li">
                    编辑账单条目
                    <ul>
                        <li id="ModifyRec">修改</li>
                        <li id="DelateRec">删除</li>
                        <li>批量操作</li>
                    </ul>
                </li>

                <li class="li">
                    图表统计
                </li>

                <li class="li">
                    愿望清单
                </li>
                <li class="li">
                    设置
                    <ul>
                        <li>设置预算 </li>
                        <li>重置密码 </li>
                        <li>使用指南</li>
                        <li>意见反馈</li>
                    </ul>
                </li>
                <li class="li">
                    邀请好友
                </li>
                <li class="li">
                    理财知识
                </li>
            </ul>
        </nav>
        <div id="recordtable">
            <table class="content-table" ref="maintable">
                <thead>
                <tr>
                    <th>类型</th>
                    <th>金额</th>
                    <th>时间</th>
                    <th id="remark">备注</th>
                    <th align="right"><button class="finish"><i class="iconfont" >&#xe66a;</i></button></th>
                </tr>
                </thead>
                <tbody>

                <tr v-for="(it,i) in list1">
                    <td>{{it.type}} </td>
                    <td><span v-if="it.inOut==1">-</span><span v-if="it.inOut==0">+</span>{{it.price}} </td>
                    <td>{{it.time}} </td>
                    <!-- 不加下面的style三句话不能隐藏溢出 -->
                    <td style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;">{{it.remark}} </td>
                    <td><button class="modify" @click="modify_item(it)"><i class="iconfont" >&#xe61a;</i></button>
                        <button class="delete" @click="del_item(it)"><i class="iconfont" >&#xe8b6;</i></button></td>
                </tr>

                </tbody>
            </table>
            <div class="container" v-if="list1.length==0">
                <div class="sun">
                    <div class="sun-body">
                        <div class="line" style="--i: 1"></div>
                        <div class="line" style="--i: 2"></div>
                        <div class="line" style="--i: 3"></div>
                        <div class="line" style="--i: 4"></div>
                        <div class="line" style="--i: 5"></div>
                        <div class="line" style="--i: 6"></div>
                        <div class="line" style="--i: 7"></div>
                        <div class="line" style="--i: 8"></div>
                    </div>
                    <div class="eye"></div>
                </div>
                <div class="horizon"></div>
            </div>
        </div>
    </div>
<!--    &lt;!&ndash; 底部 &ndash;&gt;-->
<!--    <div class="footers">-->
<!--        <div class="footer">-->
<!--            <div class="footer-top_li">-->
<!--                <div class="footer-top_li_1">-->
<!--                    <a href="javascript:;"><i class="fa fa-wrench"></i>关于我们</a><span></span>-->
<!--                        <a href="javascript:;"><i class="fa fa-rotate-right "></i>联系我们</a><span></span>-->
<!--                        <a href="javascript:;"><i class="fa fa-refresh"></i>用户协议</a><span></span>-->
<!--                        <a href="javascript:;"><i class="fa fa-gift"></i>加入我们</a><span></span>-->
<!--                        <a href="javascript:;"><i class="fa fa-map-marker"></i>友情链接</a>-->
<!--                </div>-->

<!--                <span class="separate"></span>-->
<!--                <div class="footer-top_li_2">-->
<!--                    <div class="footer-top_li_a">-->

<!--                        <dl>-->
<!--                            <dt>服务支持</dt>-->
<!--                            <dd><a href="javascript:;">售后政策</a></dd>-->
<!--                            <dd><a href="javascript:;">自助服务</a></dd>-->
<!--                        </dl>-->
<!--                        <dl>-->
<!--                            <dt>关于IMoney</dt>-->
<!--                            <dd><a href="javascript:;">了解IMoney</a></dd>-->
<!--                            <dd><a href="javascript:;">加入IMoney</a></dd>-->

<!--                        </dl>-->

<!--                        <dl>-->
<!--                            <dt>关注我们</dt>-->
<!--                            <dd><a href="javascript:;">新浪微博</a></dd>-->
<!--                            <dd><a href="javascript:;">联系我们</a></dd>-->
<!--                        </dl>-->

<!--                        <dl>-->
<!--                            <dt>举报</dt>-->
<!--                            <dd><a href="javascript:;">扫黄打非举报</a></dd>-->
<!--                            <dd><a href="javascript:;">儿童色情信息举报 </a></dd>-->
<!--                        </dl>-->

<!--                        <dl>-->
<!--                            <dt>不良信息举报电话 </dt>-->
<!--                            <dd><a href="javascript:;"> 互联网举报中心 </a></dd>-->
<!--                            <dd><a href="javascript:;">12345便民热线</a></dd>-->

<!--                        </dl>-->

<!--                        <dl>-->
<!--                            <dt>网上有害信息举报</dt>-->
<!--                            <dd><a href="">反诈劝阻电话“96110”</a></dd>-->
<!--                            <dd><a href="">专门针对避免您财产被骗</a></dd>-->

<!--                        </dl>-->
<!--                        <div class="connect">-->
<!--                            <div id="tu"></div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
</div>
</body>

<script>
    new Vue({
        el: "#web",
        data() {
            return {
                inOut:null,
                list_in:['工资','兼职','理财','礼金','实习','其他'],
                list_out:['餐饮','购物','日用','交通','娱乐','通信','服饰','住房','社交','旅行','烟酒','医疗','学习','宠物','礼物','办公','捐赠','快递','其他'],
                list_inout:[
                    {label:"收入", options:['工资','兼职','理财','礼金','其他','实习'],},
                    {label:"支出", options:['餐饮','购物','日用','交通','娱乐','通信','服饰','住房','社交','旅行','烟酒','医疗','学习','宠物','礼物','办公','捐赠','快递','其他'],}
                ],
                list1: [
                ], //主表格中的数据 或者说 主数据


                dialogVisible: false, //添加支出的那个表
                dialogVisible2: false, //添加收入的表  非特殊情况不要动 后面方法调用更改的
                dialogVisible3: false,
                form: {
                    price: null,
                    type: '',
                    time: '',
                    remark: ''
                },
                // 时间选择器
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                // 搜索框中的时间选择器
                value1: '',
                value2: '',
                // 搜索框的input
                input: '',

                // 注释就是不记得啥用了
                // state1: '',
                // restaurants: [],

                //type选择器
                options_type: [{
                    value: '日常生活',
                    label: '日常生活'
                }, {
                    value: '游戏娱乐',
                    label: '游戏娱乐'
                }, {
                    value: '出行旅游',
                    label: '出行旅游'
                }, {
                    value: '医疗保险',
                    label: '医疗保险'

                }],
                value_type: '',
                //账本选择器
                options_account: [{
                    value: '默认账本',
                    label: '默认账本'
                },],
                value_account: '',

                // 收入支出选择器
                options_inout: [{
                    value: '收入',
                    label: '收入'
                }, {
                    value: '支出',
                    label: '支出'
                },],
                value_inout: '',

                //当前选中行参数 的 list中的 位置
                row_now: -2,
                row_before: {},
                //分界线-------------------------账本操作---------------------------------
                //存放账本id
                bookUIds:[{bookname:"生死谱",id:8,useremail:"Atomy@cool.com"}, {bookname:"新华字典",id:10,useremail:"Atomy@cool.com"}, {bookname:"前端从入门到入土",id:999,useremail:"Atomy@cool.com"},],
                //当前账本id
                bookid:8,
                recordId:-1,
                bookVisible1: false,
                bookVisible2: false,
                bookVisible3: false,
                bookform:{},//账本数据
                book_now_name:"生死谱",//当前账本名称

            }
        },
        methods: {
            test() {

                this.msg_ture("success")

                // this.msg_false(this.bookid)
            }
            ,

            //清空表单数据 一般用于取消创建或修改按钮
            clearform() {
                this.dialogVisible = false,
                    this.dialogVisible2 = false,
                    this.dialogVisible3 = false,
                    this.form = {
                        price: null,
                        type: '',
                        time: '',
                        remark: ''
                    }


            },
            //提交服务器 添加数据
            onSubmit_create() {
                //首先判定输入合法
                if((this.form.time.length==0)||!(this.form.price>0)||(this.form.type.length==0)){
                    this.msg_false("请完善账单信息")
                    return false;
                }


                //前端提交数据
                //调用数据一定要加this 不然不起作用
                this.list1.unshift(this.form) //添加数据到第一条
                //增加属性bookid 和 inout进去
                this.list1[0].bookUid=this.bookid
                this.list1[0].inOut=this.inOut

                var add_record= this.list1[0]//需要上传后端的数据
                add_record.price=parseFloat(add_record.price)//转price 为 float 格式
                // 排序
                this.sort1()
                this.clearform()

                //查找到刚刚那条数据位置
                var a=this.findIndex(this.list1,add_record)
                // 传输数据到后端
                //发送数据为json对象 地址为/records/add_new_record
                let x= new URLSearchParams()
                add_record.price=parseFloat( add_record.price)
                for (i in add_record ){
                    x.append(i,add_record[i])
                }
                // alert(x)
                this.list1[a].recordId = -1
                var that = this
                axios.post("/records/add_new_record",x).then(function(response) {
                    if (response.data.state==200){
                        that.list1[a].recordId=response.data.data
                        // alert(response.data.data)//返回值就是 int 如 45
                        that.msg_ture("添加成功")
                    }else {
                        // alert("no 200")
                        that.msg_false("添加失败")
                    }
                    if(response.data.state==3000){
                        // alert("添加失败")
                        window.location.href="首页.html";
                    }

                })




            },
            onSubmit_modify() {
                //首先判定合法输入
                if((this.form.time.length==0)||!(this.form.price>0)||(this.form.type.length==0)){
                    this.msg_false("请完善账单信息")
                    return false;
                }

                Vue.set(this.list1, this.row_now, this.form);
                if(this.findIndex(this.list_in,this.list1[this.row_now].type) >=0){
                    this.inOut=0//在收入列表中 所以收入 = 0
                }else {this.inOut=1}
                this.list1[this.row_now].inOut=this.inOut
                var after_modify=this.list1[this.row_now]
                // 排序 清空 重置
                this.sort1()
                this.clearform()

                // 传输数据到后端
                var that = this;
                //发送数据为json对象 地址为/records/mod_record
                let x= new URLSearchParams()
                for(i in after_modify){
                    x.append(i,after_modify[i])
                 }
                // alert(x)
                axios.post("/records/mod_record",x).then(function(response) {
                    if (response.data.state==200){
                        // alert("success")
                        that.msg_ture("修改成功")
                    }else {
                        // alert("no 200")
                    }
                    if(response.data.state==3010){
                        // alert("修改失败")
                        that.msg_false("修改失败")
                        window.location.href="首页.html";
                    }

                })

            },
            concel_modify() {

                this.list1[this.row_now] = this.row_before
                this.sort1()
                this.clearform()

                // this.dialogVisible3 = false
            },

            sort1() {
                for (var i = this.list1.length - 1; i > 0; i--) {
                    for (var j = 0; j < i; j++) {
                        if (this.list1[j].time < this.list1[j + 1].time) {

                            var a = this.list1[j]
                            Vue.set(this.list1, j, this.list1[j + 1]); //赋值不会更新vue的list 手动更新方法
                            Vue.set(this.list1, j + 1, a);
                        }
                    }
                }
            },
            // 表单确认关闭？
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        this.clearform()
                        done();
                    })
                    .catch(_ => {
                    });
            },
            // 方法调用展示表单
            dialogVisible_pay() {
                this.inOut=1
                this.dialogVisible = true
            },
            dialogVisible_earn() {
                this.inOut=0
                this.dialogVisible2 = true

            },


            //修改表单的数据  这里只展示
            modify_item(it) {
                // 获取当前行数据在list中的位置
                this.row_before = JSON.parse(JSON.stringify(it))
                this.row_now = this.findIndex(this.list1, it)

                //展示表单 并可修改
                this.form = it
                this.dialogVisible3 = true
            },

            //删除账单 it为直接传入的json对象
            del_item(it) {
                // 获取当前行数据 的index位置
                this.row_now = this.findIndex(this.list1, it)
                var del_item = this.list1[this.row_now]//存储要删除的数据发给后端
                //前端删除改行
                var list2 = []
                for (var i = 0; i < this.list1.length; i++) {
                    if (i != this.row_now)
                        list2.unshift(this.list1[i])
                }
                this.list1 = list2
                this.sort1()
                this.clearform //使用后清空表单
                //传参数给后端删除---------------
                var that = this;
                //发送数据为json对象 地址为/records/delete
                let x= new URLSearchParams()
                x.append("recordId",del_item.recordId)
                // alert(x)
                axios.post("/records/delete",x).then(function(response) {
                    if (response.data.state==200){
                         // alert("success")
                        that.msg_ture("删除成功")//出bug 这里 在想怎么修复
                    }else {
                        // alert("no 200")
                        that.msg_false("删除失败")
                    }
                    if(response.data.state==3020){
                        // alert("删除失败")
                        window.location.href="首页.html";
                    }

                })
            },

            //查找行在对应的列表中的索引位置
            findIndex(list, item) {
                for (var i = 0; i < list.length; i++) {
                    if (list[i] == item) {
                        return i;
                    }
                }

                // 没有找到元素返回-1
                return -1;
            },
            //初始化表格参数
            ask_list() {
                // alert("回参请求！")
                var that = this;                 //records/add_new_record    /User/information
                axios.post("/User/information","").then(function(response) {
                    that.list1=response.data.data
                    that.sort1()
                })
                this.sort1()

            },

            //分界线-------------------------账本操作---------------------------------
            getbook(){
                var that=this
                axios.post("/User/Books","").then(function(response) {
                    that.bookUIds=response.data.data//更新所有账本信息到bookuids 列表中
                    that.bookid=response.data.data[0].id//更新当前账本的信息
                    that.book_now_name=response.data.data[0].bookname
                })
            },
            //切换 增加 修改账本 的表单可视区域
            bookVisible_change(){
                this.bookVisible1=true
            },
            bookVisible_add(){
                this.bookVisible2=true
            },
            bookVisible_del(){
                this.bookVisible3=true
            },
            //清空账本表单数据
            clearbookform(){
                this.bookVisible1=false
                this.bookVisible2=false
                this.bookVisible3=false
                this.bookform={}

            },
            //增加新账本
            addnewbook(){
                if(this.bookform.new==null){
                    this.msg_false("请填写新账本名称")
                    return false;
                }
                //判定新账本是否已存在
                for (var i = 0; i < this.bookUIds.length; i++) {
                    if (this.bookUIds[i].bookname == this.bookform.new) {
                        this.msg_false("账本已存在")
                        return false;
                    }}
                var that=this
                let x= new URLSearchParams()
                x.append("email",this.bookUIds[0].useremail)
                x.append("bookname",this.bookform.new)

                axios.post("/books/add_new_book",x).then(function(response) {
                    if (response.data.state==200){
                        that.msg_ture("添加新账本")
                        that.bookid=response.data.data//更新当前账本id
                        that.book_now_name=that.bookform.new
                        //更新当前账本名称 未定义
                        var book ={
                            id:response.data.data,
                            username:that.bookUIds[0].useremail,
                            bookname:that.bookform.new
                        }
                        that.bookUIds.push(book)
                        that.list1=[]//清空表格
                        that.sort1()//更新表格
                        that.clearbookform()
                    }else {
                        that.msg_ture("添加失败")
                    }
                    if(response.data.state==3000){
                        window.location.href="首页.html";
                    }

                })
            },
            del_book(){
                if(this.bookid==8){
                    this.msg_false("这是系统为您设置的默认账本,请勿删除！")
                    this.clearbookform()
                    return false}

                let x= new URLSearchParams()
                x.append("bookId",this.bookid)

                var that=this
                axios.post("/books/delete_book",x).then(function(response) {
                    if (response.data.state==200){
                        that.msg_ture("删除账本成功")
                        //删除成功后直接刷新界面
                        setTimeout(function () {window.location.href="首页.html";
                        },1000);
                    }else {
                        that.msg_false("删除失败")
                    }
                    if(response.data.state==3020){
                        setTimeout(function () {window.location.href="首页.html";
                        },1000);

                    }

                })
            },
            change_book(){
                if(this.bookform.type==null){
                    this.msg_false("请选择账本")
                    return false;
                }
                //查找对应账本id
                var it=-1;
                for(var i =0;i<this.bookUIds.length;i++){
                    if(this.bookform.type==this.bookUIds[i].bookname){
                        it=this.bookUIds[i].id
                    }
                }
                //发送账本id到服务器
                let x= new URLSearchParams()
                x.append("bookId",it)
                //未测试地址
                var that=this
                axios.post("/books/switch_book",x).then(function(response) {
                    if (response.data.state==200){
                        that.msg_ture("已更改当前账本")//成功后 更新账本信息*2 更新表格
                        that.bookid=it
                        that.book_now_name=that.bookform.type
                        that.list1=response.data.data
                        that.sort1()//更新表格
                        that.clearbookform()

                    }else {
                        that.msg_false("切换失败")
                    }
                    if(response.data.state==3020){

                        window.location.href="首页.html";
                    }
                })
            },
            //更改消息
            msg_false(msg) {
                this.$message({
                    showClose: true,
                    message: msg,
                    type: 'warning',
                });
            },
            msg_ture(msg) {
                this.$message({
                    showClose: true,
                    message: msg,
                    type: 'success',
                });
            },


        },

        //加载结束后 自动执行的方法 可以调数据
        mounted (){
            // alert("加载中")
            this.ask_list()
            this.sort1()
            this.getbook()
        },


    })
</script>
</html>